<script setup>

	import {ref, reactive} from 'vue'
    import roleApi from '@/api/sys/role'

    const viewData = reactive({
        pageData: [],
        page: {
            current: 1,
            size: 10
        },
        total: 0,

        searchForm: {}
    })

    //列表
    const initData = () => {
	    const params = {
            ...viewData.searchForm,
            ...viewData.page
        }
        roleApi.getRolePage(params).then(response => {
            viewData.pageData = response.data.records
            viewData.total = response.data.total
        })
    }
    initData()
    const handleChangeCurrent = (val) => {
        viewData.page.current = val
        initData()
    }

    //删除
    import { ElMessage, ElMessageBox } from 'element-plus'
    let selectedIds = []
    const delBtnDisabled = ref(true)
    const handleSelectionChange = (val) => {
        delBtnDisabled.value = val.length === 0
        selectedIds = val.map(item => item.id)
        console.log('selectedIds',selectedIds)
    }
    const deleteHandler = (id) => {
        let ids =  []
        if(id) {
            ids.push(id)
        }else{
            //批量删除
            ids.push(...selectedIds)
        }
        ElMessageBox.confirm('确认删除该记录吗?', '警告',
            {confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning',}
        ).then(() => {
            roleApi.batchDeleteByIds(ids).then(response => {
                ElMessage({type: 'success',message: '操作成功',})
                initData()
            })
        }).catch(() => {
        })
    }

    //新增/编辑
    import Edit from './edit.vue'
    const editDrawer = ref(false)
    const editRef = ref(null)
    const editHandler = (id) => {
        editDrawer.value = true
        //调用子组件的init方法
        editRef.value.init(id)
    }

    //提供给子组件去调用的方法
    //hasChange为true，需要更新列表，
    const closeHandler = (hasChange) => {
        editDrawer.value = false
        permDrawer.value = false
        if (hasChange) {
            initData()
        }
    }

    //分配菜单权限
    import Perm from './perm.vue'
    const permDrawer = ref(false)
    const permRef = ref(null)
    const permHandler = (id) => {
        permDrawer.value = true
        //调用子组件的init方法
        permRef.value.init(id)
    }

</script>

<template>
	<div>
		<el-form :inline="true" ref="formRef">

			<el-form-item>
				<el-button type="primary" @click="editHandler(null)">新增</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="danger" @click="deleteHandler(null)" :disabled="delBtnDisabled">批量删除</el-button>
			</el-form-item>
			<el-form-item>
				<el-input placeholder="名称" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-button>搜索</el-button>
			</el-form-item>

		</el-form>

		<el-table
				ref="multipleTable"
				:data="viewData.pageData"
				tooltip-effect="dark"
				style="width: 100%"
				border
				stripe
				@selection-change="handleSelectionChange">

			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column prop="name" label="名称" width="120"></el-table-column>
			<el-table-column prop="code" label="唯一编码" show-overflow-tooltip></el-table-column>
			<el-table-column prop="remark" label="描述" show-overflow-tooltip></el-table-column>
			<el-table-column prop="icon" label="操作">

				<template #default="scope">
					<el-button type="text" @click="permHandler(scope.row.id)">分配权限</el-button>
					<el-divider direction="vertical"></el-divider>
					<el-button type="text" @click="editHandler(scope.row.id)">编辑</el-button>
					<el-divider direction="vertical"></el-divider>
					<el-button type="text" @click="deleteHandler(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination
            background
            layout="total, prev, pager, next"
            :total="viewData.total"
            :page-size="viewData.page.size"
            @current-change="handleChangeCurrent"
            style="margin-top: 15px"
        />


	</div>
    <Edit ref="editRef" :editDrawer="editDrawer" @closeHandler="closeHandler"></Edit>
    <Perm ref="permRef" :permDrawer="permDrawer" @closeHandler="closeHandler"></Perm>
</template>
